<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0; 
            padding: 0; 
            text-align: center;
        }
        table{
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
        <h1>2107班 学生管理系统</h1>
        <div>
            姓名：<input type="text" id="nickname">
            <br>
            手机号：<input type="text" id="phone">
            <br>
            性别：<input type="radio" class="sex" checked name="sex" value="男">男
            <input type="radio"  class="sex"  name="sex" value="女">女
            <br>
            爱好：<input type="checkbox" class="ck" value="吃">吃
                  <input type="checkbox" class="ck" value="女">女
                  <input type="checkbox" class="ck" value="男">男
                  <input type="checkbox" class="ck" value="炸雷">炸雷
           <br>
           <button id="add">添加</button>
        </div>
        <div>
            <table border="1">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>性别</th>
                         <th>爱好</th>
                         <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <!-- <tr>
                        <td>12462234234</td>
                        <td>彭政</td>
                        <td>17555555555</td>
                        <td>男</td>
                        <td>女，炸雷</td>
                        <td>
                            <a href="#">删除</a>
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <script>
                var add=document.querySelector("#add");//添加
                var tbody=document.querySelector("#tbody");//tbody
                var phone=document.querySelector("#phone");//手机号
                var nickname=document.querySelector("#nickname");//昵称
                
                // 点击添加按钮
                add.onclick=function(){

                    // 获取当前选中的性别
                    var sex=document.querySelectorAll(".sex")
                     let sexStr=""
                     sex[0].checked?  sexStr=sex[0].value   :    sexStr=sex[1].value
                    //获取爱好
                    var cks=document.querySelectorAll(".ck");
                    var arr=[];
                    for(var i=0;i<cks.length;i++){//循环复选框
                        if(cks[i].checked){ //当前复选框被选中
                            arr.push(cks[i].value); 
                        }
                    }
                    console.log(arr)
                    var str=`
                        <tr>
                            <td>${new Date().getTime()}</td>
                            <td>${nickname.value}</td>
                            <td>${phone.value}</td>
                            <td>${sexStr}</td>
                            <td>${arr}</td>
                            <td>
                                <a href="#">删除</a>
                            </td>
                        </tr>
                    `
                    tbody.innerHTML+=str;
                }



        </script>
</body>
</html>